<template>
  <div>
    <!-- 类同与'直播间带货榜' windmill-->
    <div class="act_btn">直播风车榜</div>
    <div id="windmill">
      <p class="data_time">
        <span>数据更新时间：</span>
        <!-- <span>{{ timestamp(time, "Y-M-D h:m") }}</span> -->
        <span>{{upTime}} 00:00</span>
      </p>
      <category_industry v-model="industryItemObj" :class="'mt_30'"/>
      <ul
        class="fixedThead"
        ref="fixedThead"
        :class="{ isShow: isFixed }"
        :style="showLeft == true ? 'left:222px' : 'left:98px'"
        v-if="table_data01.length"
      >
        <li tc>排名</li>
        <li>直播间</li>
        <li>达人</li>
        <li tc>风车名称</li>
        <li>开播时间</li>
        <li>直播时长</li>
        <li>累计观看人次</li>
        <li tc>点赞数</li>
      </ul>
      <table class="table" ref="tableEl">
        <thead>
          <tr>
            <th>排名</th>
            <th>直播间</th>
            <th>达人</th>
            <th>风车名称</th>
            <th>开播时间</th>
            <th>直播时长</th>
            <th>累计观看人次</th>
            <th>点赞数</th>
          </tr>
        </thead>
        <tbody v-if="table_data01.length != 0 && !loading">
          <tr
            v-for="(item, index) in table_data01"
            :key="'table' + index"
            :id="!index ? 'tr1' : ''"
          >
            <td class="td td_01">
              <div>{{ 30 * (page - 1) + index + 1 }}</div>
            </td>
            <td class="td td_02">
              <div class="pointer">
                <section class="live_sta">
                  <img
                    :src="item.roomLogo"
                    @click="go_to_page01(item.roomId)"
                    @error="defaultImgFn(liveVideo,$event)"
                  />
                  <div v-if="item.status==1" class="living">
                    <p class="livingGif">
                      <span></span>
                      <span></span>
                      <span></span>
                      <span></span>
                    </p>
                  </div>
                </section>
                <section>
                  <div>
                    <img v-if="item.isShop == 1" src="../../../assets/meng/pop01.png" />
                    <img v-if="item.is_red == 1" src="../../../assets/meng/pop02.png" />
                    <span class="dot" @click="go_to_page01(item.roomId)">{{ item.roomTitle }}</span>
                  </div>
                  <div></div>
                </section>
              </div>
            </td>
            <td class="td td_03">
              <div>
                <img
                  :src="item.authorLogo"
                  @click="goTalentDetails(item.authorId)"
                  @error="defaultImgFn(superman,$event)"
                />
                <section>
                  <div>
                    <span class="dot" @click="goTalentDetails(item.authorId)">{{ item.nickName }}</span>
                    <img v-if="item.isShop == 1" src="../../../assets/meng/search_result01.png" />
                  </div>
                  <div>粉丝数：{{ format_num(item.totalFans) }}</div>
                </section>
              </div>
            </td>
            <td class="td td_04">
              <div>
                <template v-if="item.webTitle">
                  <img src="@/assets/zhao/windmill.png" class="windmill_icon" />
                  <el-dropdown v-if="item.selectList && item.selectList.length">
                    <!-- @click="towind(item.webUrl)" -->
                    <span class="el-dropdown-link">
                      {{item.webTitle}}
                      <i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                      <template v-if="item.selectList">
                        <el-dropdown-item
                          class
                          v-for="itemC,idx in item.selectList"
                          :key="idx+'dItem'"
                        >{{itemC.nameText}}</el-dropdown-item>
                      </template>
                    </el-dropdown-menu>
                  </el-dropdown>
                  <span v-else class>{{item.webTitle}}</span>
                  <img
                    src="@/assets/zhao/will_shop.png"
                    class="will_shop pointer"
                    v-if="item.isGroup"
                    @click="author1(item.cardId)"
                  />
                </template>
              </div>
            </td>
            <td class="td td_06">
              <div>{{ timestamp(item.beginTime, "M-D h:m") }}</div>
            </td>
            <td class="td td_06">
              <div>
                {{
                format_time(
                (item.endTime - item.beginTime) * 1000
                )
                }}
              </div>
            </td>
            <td class="td td_07">
              <div>{{ format_num(item.sumPeople) }}</div>
            </td>
            <td class="td td_08">
              <div>{{ format_num(item.favoriteCount) }}</div>
              <!-- <button @click="go_to_page01(item.room_id)">点赞数</button> -->
            </td>
          </tr>
        </tbody>
      </table>
      <!-- 直播风车弹窗 -->
      <el-dialog
        :visible.sync="showHotRoom"
        v-if="showHotRoom"
        top="10%"
        class="dialog01"
        custom-class="buyDialog"
        width="840px"
      >
        <div class="hotRoomBox">
          <h3 class="hotRoomTitle">商品详情</h3>
          <table class="table hotRoomTable">
            <thead>
              <tr>
                <th style="text-align:left;padding-left:20px;">商品</th>
                <th>商品原价</th>
                <th>折扣</th>
                <th>折后价</th>
                <th>销量</th>
                <th>可用门店数</th>
              </tr>
            </thead>
            <tbody v-if="CardList">
              <tr v-for="(item, index) in CardList" :key="index">
                <td>
                  <div class="imgBox">
                    <img v-errorImg:talent :src="item.image_url" />
                    <span @click="gourl(item.web_url)">{{item.source}}</span>
                  </div>
                </td>
                <td>{{ item.origin_amount}}</td>
                <td>{{ format_num(item.discount) }}</td>
                <td>{{ format_num(item.actual_amount) }}</td>
                <td>{{ item.sold_count?item.sold_count:0 }}</td>
                <td>{{ format_num(item.shop_count) }}</td>
              </tr>
            </tbody>
          </table>
          <div class="zw" v-if="CardList.length == 0 && !roomLoading">
            <img src="@/assets/liu/zw.png" />
            <p>暂无数据</p>
          </div>
          <div
            v-loading="roomLoading"
            v-if="roomLoading"
            class="roomLoading"
            element-loading-text="拼命加载中"
            element-loading-spinner="el-icon-loading"
          >
            <table class="table hotRoomTable">
              <thead>
                <tr>
                  <th style="text-align:left;padding-left:20px;">商品</th>
                  <th>商品原价</th>
                  <th>折扣</th>
                  <th>折后价</th>
                  <th>销量</th>
                  <th>可用门店数</th>
                </tr>
              </thead>
              <tbody v-if="CardList">
                <tr v-for="(item, index) in CardList" :key="index">
                  <td>
                    <div class="imgBox">
                      <img :src="item.image_url" />
                      <span @click="gourl(item.web_url)">{{item.source}}</span>
                    </div>
                  </td>
                  <td>{{ format_num(item.origin_amount) }}</td>
                  <td>{{ format_num(item.discount) }}</td>
                  <td>{{ format_num(item.actual_amount) }}</td>
                  <td>{{ item.sold_count?item.sold_count:0 }}</td>
                  <td>{{ format_num(item.shop_count) }}</td>
                </tr>
              </tbody>
            </table>

            <div class="zw" v-if="CardList.length == 0 && !roomLoading">
              <img src="@/assets/liu/zw.png" />
              <p>暂无数据</p>
            </div>
            <div class="pageBox page_box" v-if="CardList.length && countlist > 6">
              <el-pagination
                background
                layout="prev, pager, next, jumper"
                :total="countlist"
                :page-size="6"
                :current-page="page1"
                @current-change="author1"
                :hide-on-single-page="true"
              ></el-pagination>
            </div>
          </div>
        </div>
      </el-dialog>
      <div class="upgradeBox" v-if="!permissions && !loading">
        <RankUpgrade class="rankUpgrade" />
      </div>
      <!-- <div class="upgradeBox" v-if="permissions && !loading && vipLevel==0">
        <RankUpgrade class="rankUpgrade" />
      </div> -->
      <div
        v-loading="loading"
        v-if="loading"
        class="loading"
        element-loading-text="拼命加载中..."
        element-loading-spinner="el-icon-loading"
      ></div>
      <!-- <p
        class="nothing"
        v-show="table_data01.length < 30 && !loading && table_data01.length != 0"
      >我是有底线的～</p> -->
      <div class="empty" v-show="!loading && table_data01.length == 0 && permissions">
        <img src="@/assets/liu/zw.png" />
        <p>暂无数据</p>
      </div>
      <div
        class="pageBox"
        v-if="
        (table_data01.length != 0 && !loading) || (!permissions && !loading)
      "
      >
        <el-pagination
          background
          layout="prev, pager, next, jumper"
          :total="count"
          :page-size="30"
          :current-page="page"
          @current-change="get_data"
          :hide-on-single-page="true"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import category_goods from '@/component/category_goods';
import html2canvas from 'html2canvas';
import RankUpgrade from '@/component/rankUpgrade.vue';
import superman from '@/assets/img/superman.png';
import liveVideo from '@/assets/img/live-video.png';
import category_industry from '@/component/category_industry';
export default {
  name: 'windmill',
  components: { RankUpgrade, category_goods, category_industry },
  data() {
    return {
      superman: superman,
      liveVideo: liveVideo,
      cancel: null,
      checkedDatasJoe: {
        //商品类目数据初始数据，新筛选组件用
        parentId: 0,
        childIds: []
      },
      permissions: 1,
      value01: '全部',
      //   value02: '全部',
      value03: '日榜',
      busy: false,
      time: '',
      loading: true,
      table_data01: [],
      input01: '',
      count: 0,
      page: 1,
      isFixed: false,
      offsetTop: 0,
      showLeft: true,
      order_by: 'desc', //   表格头部排序
      sort: 'sales', //   表格头部排序
      value04: '全部',
      isShowList: '1',
      pro_category: '0',
      isOld: false, //是否是老分类接口
      roomLoading: false, //弹窗loading
      showHotRoom: false, //弹窗
      CardList: [], // 风车榜单商品
      page1: 1, // 弹窗分页 当前页数下标
      psize: 5, // 弹窗分页 一页展示数据
      countlist: 0,
      upTime: '', // 更新时间
      vipLevel: '',
      industryItemObj:{
        name:'全部',
        id:'0'
      }
    };
  },
  computed: {
    listen_change() {
      const { industryItemObj, value04 } = this;
      return {
        industryItemObj,
        value04
      };
    }
  },
  watch: {
    '$store.state.left_nav_flag'(old, newOld) {
      this.showLeft = newOld;
      if ((newOld = false)) {
        this.setTBBar();
      } else {
        this.setTBBar();
      }
    },
    checkedDatasJoe() {
      //新筛选组件用
      this.isOld = false;
      this.isShow();
      this.page = 1;
      this.table_data01 = [];
      this.get_data();
    }
  },
  created() {
    this.vipLevel = localStorage.getItem('vipLevel');
    this.get_data();
    this.dealTime(3);
    document.title = '直播风车榜-直播电商数据分析&智能分析服务平台-掌上精选';
    // this.get_data() 因为time_options组件内部已经提交新值，导致v-model的值更改，所以已经执行请求函数
    this.$watch(
      'listen_change',
      this.debounce((newValue, oldValue) => {
        this.isShow();
        this.page = 1;
        this.table_data01 = [];
        this.get_data();
      }, 0)
    );
  },
  mounted() {
    window.addEventListener('scroll', this.initHeight);
    window.addEventListener('resize', () => {
      //给浏览器窗口绑定变化大小事件
      this.setTBBar();
    });
  },
  methods: {
    // 默认头像设置
    defaultImgFn(url, e) {
      if (url == superman) {
        e.target.src = superman;
      } else if (url == liveVideo) {
        e.target.src = liveVideo;
      }
    },
    isShow() {
      if (
        this.value03 == '日榜?2021-07-31' ||
        this.value03 == '日榜?2021-07-30' ||
        this.value03 == '周榜?2021-07-26-2021-08-01' ||
        this.value03 == '周榜?2021-07-19-2021-07-25' ||
        this.value03 == '周榜?2021-07-12-2021-07-18' ||
        this.value03 == '月榜?2021-07-01-2021-07-31' ||
        this.value03 == '月榜?2021-06-01-2021-06-30' ||
        this.value03 == '月榜?2021-05-01-2021-05-31'
      ) {
        this.isShowList = '0';
      }
    },
    // 获取子节点函数（后期可集成到一个库里）
    getChilds(pNode) {
      if (!pNode) return false;
      let nodes = pNode.childNodes;
      let newList = [];
      for (let i = 0; i < nodes.length; i++) {
        let node = nodes[i];
        if (node.nodeType === 1) {
          //判断类型
          newList.push(node);
        }
      }
      return newList;
    },
    // 设置表格表头滑动置顶
    setTBBar() {
      this.$nextTick(() => {
        let tableEl = this.$refs.tableEl;
        let ulEl = this.$refs.fixedThead;
        let tr1 = document.querySelector('#tr1');
        if (tr1) {
          let tds = this.getChilds(tr1);
          let liEls = this.getChilds(ulEl);
          for (let i = 0; i < liEls.length; i++) {
            liEls[i].style.width = tds[i].offsetWidth + 'px';
          }
        }
      });
    },
    search_input() {
      this.page = 1;
      this.table_data01 = [];
      this.get_data();
    },
    // 风车榜关联的商品
    author1(id) {
      this.CardList = [];
      this.showHotRoom = true;
      this.roomLoading = true;
      this.$axios
        .get('/api/live/GetCardList', {
          params: {
            cardId: id
          }
        })
        .then(res => {
          this.roomLoading = false;
          if (res.data.code == 0) {
            this.CardListBox = res.data.data.data;
            if (this.page1 == 1) {
              this.CardList = this.CardListBox.slice(0, this.psize);
            }
            this.countlist = res.data.data.count;
            console.log(this.countlist);
          }
        });
    },
    pageChange(p) {
      // 自己写的分页器，切割分页
      this.CardList = this.CardListBox.slice((p - 1) * this.psize, p * this.psize);
    },
    get_data(cpage) {
      this.loading = true;
      let that = this;
      this.busy = true;
      if (cpage) {
        this.page = cpage;
        this.backTop();
      }
      this.$axios
        .post('/api/live/PostLiveWindmillRank', {
          //
          categoryId: this.industryItemObj.id,
          page: that.page,
          size: 30
        })
        .then(response => {
          this.loading = false;
          if (response.data.code1 == 1013||response.data.code == 1013||response.data.code ==1003) {
            this.permissions = 0;
            this.table_data01 = [];
          } else {
            this.permissions = 1;
          }
          if (response.data.code == 0) {
            this.time = response.data.data.time;
            let dataList = response.data.data.data;
            for (var i = 0, len = dataList.length; i < len; i++) {
              let selectList = [];
              for (var j = i + 1, len = dataList.length; j < len; j++) {
                if (dataList[i].roomId == dataList[j].roomId) {
                  selectList.push({
                    roomId: dataList[j].roomId,
                    nameText: dataList[j].webTitle,
                    webUrl: dataList[j].webUrl
                  });
                  dataList.splice(j, 1);
                  j--; // 每删除一个数j的值就减1
                  len--; // j值减小时len也要相应减1（减少循环次数，节省性能）
                }
              }
              dataList[i].selectList = selectList;
            }
            this.table_data01 = dataList;
            this.count = response.data.data.count;
            this.setTBBar();
          }
        })
        .catch(error => {});
    },
    /* // 导出榜单
    generatorImage() {
      var that = this;
      const loading = this.$loading({
        lock: true,
        text: '导出中...',
        spinner: 'el-icon-loading',
        customClass: 'customClass'
      });
      var shareContent;
      shareContent = this.$refs.tableEl; //需要截图的包裹的（原生的）DOM 对象
      console.log(shareContent);
      var width = shareContent.offsetWidth; //获取dom 宽度
      var height = shareContent.offsetHeight; //获取dom 高度
      var canvas = document.createElement('canvas'); //创建一个canvas节点
      //   var scale = window.devicePixelRatio //定义任意放大倍数 支持小数 //   var scale = 2 //定义任意放大倍数 支持小数
      var scale = 1;
      canvas.width = width * scale * scale; //定义canvas 宽度 * 缩放
      canvas.height = height * scale * scale; //定义canvas高度 *缩放
      canvas.style.width = width + 'px';
      canvas.style.height = height + 'px';
      canvas.getContext('2d').scale(scale, scale); //获取context,设置scale
      var opts = {
        dpi: window.devicePixelRatio,
        scale: scale, // 添加的scale 参数
        useCORS: true,
        canvas: canvas, //自定义 canvas
        logging: true //日志开关
      };
      html2canvas(shareContent, opts).then(canvas => {
        let str;
        str = `《直播带货榜-${that.value03.split('?')[1]}》.png`;
        canvas.toBlob(
          function (blob) {
            const eleLink = document.createElement('a');
            eleLink.download = str;
            eleLink.style.display = 'none';
            // 字符内容转变成blob地址
            eleLink.href = URL.createObjectURL(blob);
            // 触发点击
            document.body.appendChild(eleLink);
            eleLink.click();
            // 然后移除
            document.body.removeChild(eleLink);
          },
          'image/png',
          1
        );
        loading.close();
      });
    }, */
    /* // 分享榜单
    export_data() {
      let that = this;
      // let str = `排名,直播间,风车名称,达人,粉丝数,开播时间,粉丝变化,直播时长,累计观看人次\n`;
      let str = `排名,直播间,达人,风车名称,开播时间,直播时长,累计观看人次\n`;
      for (let i = 0; i < that.table_data01.length; i++) {
        str += `${i + 1},\"${that.table_data01[i].room_title.replace(
          /"/g,
          '""'
        )}\",\"${that.table_data01[i].nickname.replace(/"/g, '""')}\",${that.format_time(
          (that.table_data01[i].end_time_stamp - that.table_data01[i].start_time_stamp) * 1000
        )},${that.format_num(that.table_data01[i].visit_speak)},${that.format_num(
          that.table_data01[i].volume
        )},${that.format_num(that.table_data01[i].sales)}\n`;
      }
      var blob = new Blob([str], { type: 'text/plain;charset=utf-8' }); //解决中文乱码问题
      blob = new Blob([String.fromCharCode(0xfeff), blob], { type: blob.type });
      let object_url = window.URL.createObjectURL(blob);
      var link = document.createElement('a');
      link.href = object_url;
      let str_name = `《直播间带货榜-${that.value03.split('?')[1]}》.csv`;
      link.download = str_name;
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    }, */
    loadMore: function () {
      if (this.page == 31) {
        return false;
      }
      this.get_data();
    },
    // 跳转风车商品第三方地址
    gourl(i) {
      window.open(i);
    },
    // 跳转风车商品第三方地址
    // towind(i) {
    //   window.open(i);
    // },
    go_to_page01(id) {
      let router = this.$router.resolve({
        path: `/talent_main/liveDetailsRoot/${id}/0`
      });
      window.open(router.href, '_blank');
    },
    goTalentDetails(id) {
      let router = this.$router.resolve({
        path: `/talent_main/tdetails/${id}/${0}`
      });
      window.open(router.href, '_blank');
    },
    initHeight() {
      var scrollTop =
        window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
      this.isFixed = scrollTop > 340 ? true : false;
    },
    backTop() {
      document.body.scrollTop = document.documentElement.scrollTop = 0;
    },
    //  今天昨天明天时间处理 v==3为昨天。v==6为今天。v==9为明天
    dealTime(v) {
      let b = 24 * 60 * 60 * 1000; //一天的时间
      let day = new Date(); //当天的时间

      v == 3
        ? day.setTime(day.getTime() - b)
        : v == 6
        ? day.setTime(day.getTime())
        : day.setTime(day.getTime() + b);

      let dayMon = day.getMonth() + 1 >= 10 ? day.getMonth() + 1 : '0' + (day.getMonth() + 1);
      let dayDat = day.getDate() + 1 >= 10 ? day.getDate() : '0' + day.getDate();

      let s = day.getFullYear() + '-' + dayMon + '-' + dayDat;
      this.upTime = s;
    }
  },
  destroyed() {
    window.removeEventListener('scroll', this.initHeight);
  }
};
</script>
<style scoped lang="less">
/* 搜索框 */
// .imgBox {
//   background: url('../../../assets/wang/talentCompare/search-nohover.png') no-repeat 10px 7px, #fff;
//   background-size: 15px 15px;
// }
// .imgBox:hover {
//   background: url('../../../assets/wang/talentCompare/search.png') no-repeat 10px 7px, #fff;
//   background-size: 15px 15px;
// }
.living {
  position: absolute;
  bottom: 0px;
  right: 13px;
  width: 18px !important;
  height: 18px !important;
  background-image: linear-gradient(90deg, #ff295d 1%, #fa4fa2 100%),
    linear-gradient(#ffffff, #ffffff);
  background-blend-mode: normal, normal;
  border-radius: 6px 0 4px 0px;
  font-size: 12px;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 2px;
}
.live_sta {
  position: relative;
}
.data_time {
  margin-top: -42px;
  margin-bottom: 10px;
  margin-right: 0px;
  text-align: right;
  > span:first-child {
    font-size: 14px;
    color: #888888;
    // margin-right: 9px;
    letter-spacing: 0;
  }
  > span:last-child {
    font-size: 15px;
    // font-family: DINAlternate-Bold;
    letter-spacing: 0;
    color: #888;
  }
}
.table {
  position: relative;
  thead {
    tr {
      > th:nth-child(1) {
        width: 110px;
      }
      > th:nth-child(2) {
        width: 300px;
        text-align: left;
        padding-left: 8px;
      }
      > th:nth-child(3) {
        width: 220px;
        text-align: left;
        padding-left: 30px;
      }
      > th:nth-child(4) {
        width: 210px;
        text-align: left;
        padding-left: 75px;
      }
      > th:nth-child(5) {
        width: 130px;
      }
      > th:nth-child(6) {
        width: 210px;
      }

      > th:nth-child(7),
      > th:nth-child(8) {
        width: 154px;
      }
    }
    img {
      vertical-align: 0px;
    }
  }
  tbody {
    tr {
      height: 78px;
    }
    .td_08 {
      text-align: center;
      button {
        width: 88px;
        height: 32px;
        background-color: transparent;
        border-radius: 4px;
        border: 1px solid #fd7f2c;
        font-size: 14px;
        font-weight: normal;
        font-stretch: normal;
        line-height: 30px;
        letter-spacing: 0px;
        color: #fd7f2c;
        text-align: center;
      }
      button:hover {
        border: 1px solid #ff924b;
        color: #ff924b;
      }
    }
    .td_01 {
      > div {
        font-family: DINAlternate-Bold;
        display: flex;
        align-items: center;
        > span:first-child {
          display: inline-block;
          width: 60px;
          text-align: right;
          font-size: 14px;
        }
        > section {
          text-align: left;
          width: 90px;
          .new_font {
            font-size: 14px;
            color: #fd7f2c;
            vertical-align: 3px;
            margin-left: 8px;
          }
          img {
            width: 8px;
            height: 12px;
            margin-top: -3px;
            margin-left: 8px;
            margin-right: 6px;
          }
          span {
            font-size: 15px;
            vertical-align: 1px;
          }
          .gray_img {
            width: 12px !important;
            height: 8px !important;
            margin-left: 6px !important;
            margin-right: 4px !important;
          }
        }
      }
    }
    .td_05 {
      > div {
        text-align: left;
        .new_font {
          font-size: 15px;
          color: #fd7f2c;
          vertical-align: 3px;
          margin-left: 8px;
        }
        img {
          width: 8px;
          height: 12px;
          margin-top: -3px;
          margin-right: 6px;
        }
        span {
          font-size: 15px;
          vertical-align: 1px;
        }
        .gray_img {
          width: 12px !important;
          height: 8px !important;
          margin-left: 6px !important;
          margin-right: 4px !important;
        }
      }
    }
    .td_01,
    .td_04,
    .td_07,
    .td_05,
    .td_06 {
      font-family: DINAlternate-Bold;
      font-size: 15px;
      text-align: center;
    }
    .td_04 {
      display: flex;
      padding-left: 50px;
      .el-dropdown {
        margin-top: 0;
        vertical-align: middle;
        cursor: pointer;
      }
      & > div {
        display: flex;
        font-size: 15px;
        color: #222;
        margin-top: 5px;
        height: 70px;
        display: flex;
        align-items: center;
        span {
          min-width: 2px;
          max-width: 190px;
          font-size: 15px;
          color: #222;
          text-align: left;
          display: block;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }
        img {
          width: 16px;
          height: 16px;
          display: inline-block;
          vertical-align: middle;
        }
        .windmill_icon {
          margin-right: 6px;
        }
        .pointer {
          // cursor: pointer;
        }
        .will_shop {
          margin-left: 8px;
        }
      }
    }
    .td_03 {
      padding-left: 20px;
      > div {
        cursor: pointer;
        justify-content: left !important;
        section {
          > div:first-child {
            display: flex;
            align-items: center;
            > span {
              width: 126px;
              display: block;
              word-break: break-all;
              font-size: 14px;
              font-weight: 600;
              color: #222222;
              margin-bottom: 5px;
            }
            > span:hover {
              color: #fd7f2c;
            }
            img {
              width: 16px;
              height: 16px;
              margin-left: 6px;
            }
          }
          > div:last-child {
            width: 100%;
            word-break: break-all;
            font-size: 14px;
            color: #888;
          }
        }
        > img {
          border-radius: 50%;
          width: 50px;
          margin-right: 12px;
          object-fit: cover;
          border: 1px solid #e5e5e5;
        }
      }
    }
    .td_02 {
      > div {
        justify-content: left !important;
        section {
          > div:nth-child(1) {
            display: flex;
            align-items: center;
            position: relative;
            > span {
              width: 200px;
              display: block;
              word-break: break-all;
              font-size: 14px;
              color: #222222;

              font-weight: 600;
            }
            > span:hover {
              color: #fd7f2c;
            }
            img {
              height: 16px;
              margin-right: 6px;
            }
          }
          > div:nth-child(2) {
            width: 100%;
            word-break: break-all;
            font-size: 14px;
            color: #555555;
          }
          > p:nth-child(3) {
            button {
              padding: 3px 10px;
              border-radius: 21px;
              border: solid 1px #1779ff;
              background-color: #f5f9ff;
              font-size: 14px;
              color: #1779ff;
              margin-right: 10px;
              margin-top: 7px;
            }
          }
        }
        img {
          width: 50px;
          height: 50px;
          object-fit: cover;
          border-radius: 6px;
          margin-right: 12px;
          border: 1px solid #e5e5e5;
        }
      }
    }
    .td:not(.td_04) {
      > div {
        height: 70px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
}
.type {
  margin-bottom: 14px;
  > div {
    display: inline-block;
  }
  .input_group {
    display: inline-block;
    margin-left: 11px;
    position: relative;
    width: 308px;
    height: 32px;
    border-radius: 4px 4px 4px 4px;
    border: solid 1px #e5e5e5;
    box-sizing: border-box;
    input {
      width: 100%;
      font-size: 14px;
      vertical-align: -1px;
      background-color: #f5f5f5;
      height: 100%;
      box-sizing: border-box;
      padding-left: 11px;
      padding-right: 38px;
      border: none;
      color: #222;
    }
    input::-webkit-input-placeholder {
      color: #b5b5b5 !important;
    }
    > div {
      position: absolute;
      right: 0;
      cursor: pointer;
      top: 0;
      text-align: center;
      width: 40px;
      height: 30px;
      border-radius: 0px 4px 4px 0px;
      display: flex;
      align-items: center;
      justify-content: center;
      img {
        width: 15px;
      }
    }
  }
  .btn_group {
    text-align: right;
    float: right;
    button {
      width: 70px;
      height: 32px;
      border-radius: 4px;
      border: solid 1px #e5e5e5;
      font-size: 14px;
      // line-height: 30px;
      box-sizing: border-box;
      color: #555;
      text-align: center;
    }
    button:nth-of-type(2) {
      color: #67ac5b;
      border: 1px solid #67ac5b;
    }

    > button:nth-child(1) {
      margin-right: 10px;
      span {
        display: inline-block;
        width: 14px;
        height: 14px;
        background: url('../../../assets/zhao/fenx.png') no-repeat;
        background-size: 100% 100%;
        margin-right: 4px;
        position: relative;
        top: 2px;
      }
    }
    > button:nth-child(2) {
      span {
        display: inline-block;
        width: 14px;
        height: 14px;
        background: url('../../../assets/zhao/daoc.png') no-repeat;
        background-size: 100% 100%;
        margin-right: 4px;
        position: relative;
        top: 2px;
      }
    }
    button:nth-of-type(1):hover {
      color: #777;
      span {
        background: url('../../../assets/zhao/fenx_h.png') no-repeat;
        background-size: 100% 100%;
      }
    }
    button:nth-of-type(2):hover {
      color: #80be76;
      border-color: #80be76;
      span {
        background: url('../../../assets/zhao/daoc_h.png') no-repeat;
        background-size: 100% 100%;
      }
    }
  }
}
// button 按钮
.act_btn {
  width: 90px;
  background-color: #fd7f2c;
  color: #fff;
  font-size: 14px;
  text-align: center;
  padding: 0 12px;
  line-height: 40px;
  border-radius: 4px;
  font-weight: 600;
  margin: 15px 15px 1px;
}
#windmill {
  padding-bottom: 1px;
  padding-top: 10px;
  padding-left: 20px;
  padding-right: 20px;
  min-height: 100vh;
  margin: 14px;
  background-color: #fff;
  .paginationBox {
    width: 100%;
    background-color: #fff;
    // margin-top: 10px;
    overflow: hidden;
    padding: 20px;
    box-sizing: border-box;
    // padding-left: 1000px;
    .el-pagination {
      float: right;
    }
  }
  // 升级会员
  .upgradeBox {
    min-height: 60vh;
    position: relative;
    .rankUpgrade {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
}
.fixedThead {
  display: none;
  position: fixed;
  top: 60px;
  left: 200px;
  min-width: 1380px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  color: #555;
  background-color: #f5f9ff;
  height: 48px;
  line-height: 48px;
  overflow: hidden;
  z-index: 99;
  font-size: 0;
  white-space: nowrap;
  li {
    box-sizing: border-box;
    display: inline-block;
    font-size: 14px;
  }
  &.isShow {
    display: block;
  }
  img {
    width: 5px;
    height: 10px;
    vertical-align: 0px;
  }
  /* li:nth-child(5),
  li:nth-child(7),
  li:nth-child(8) {
    img {
      width: 5px;
      height: 10px;
      margin-left: -8px;
    }
  } */
  li:nth-child(1) {
    width: 110px;
  }
  li:nth-child(2) {
    width: 300px;
    text-align: left;
    padding-left: 8px;
  }
  li:nth-child(3) {
    width: 220px;
    text-align: left;
    padding-left: 30px;
  }
  li:nth-child(4) {
    width: 210px;
    text-align: left;
    padding-left: 75px;
  }
  li:nth-child(5) {
    width: 130px;
    text-align: center;
  }
  li:nth-child(6) {
    width: 210px;
    text-align: center;
  }

  li:nth-child(7),
  li:nth-child(8) {
    width: 154px;
    text-align: center;
  }
}
[tc] {
  text-align: center;
}
[tl] {
  text-align: left;
}
[tr] {
  text-align: right;
}
// 商品 弹窗
.hotRoomBox {
  padding: 20px;
  min-height: 570px;
  .hotRoomTitle {
    font-size: 16px;
    font-weight: normal;
    font-stretch: normal;
    color: #222;
    padding: 3px 0 18px 10px;
    position: relative;
  }
  .hotRoomTitle::after {
    content: '';
    position: absolute;
    display: block;
    left: 0;
    top: 7px;
    width: 4px;
    height: 16px;
    background-color: #fd7f2c;
  }
  .roomLoading {
    transform: translateY(100px);
  }
}
//商品 弹窗 列表
.hotRoomTable {
  thead {
    tr {
      > th:nth-of-type(1) {
        width: 300px;
      }
      > th:nth-of-type(2) {
        width: 60px;
        text-align: center;
      }
      > th:nth-of-type(3),
      > th:nth-of-type(4),
      > th:nth-of-type(5),
      > th:nth-of-type(6) {
        width: 110px;
        text-align: center;
        padding: 0 !important;
      }
    }
  }
  tbody {
    tr {
      td {
        height: 78px;
        line-height: 78px;
      }
      > td:nth-of-type(1) {
        width: 300px;
        .imgBox {
          display: flex;
          img {
            width: 50px;
            height: 50px;
            display: inline-block;
            border-radius: 6px;
            margin: 14px 10px 0 10px;
            object-fit: cover;
          }
          span {
            display: inline-block;
            width: 196px;
            font-size: 14px;
            color: #222;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            cursor: pointer;
          }
          span:hover {
            color: #fd7f2c;
          }
        }
      }
      > td:nth-of-type(2) {
        width: 60px;
        text-align: center;
      }
      > td:nth-of-type(3),
      > td:nth-of-type(4),
      > td:nth-of-type(5),
      > td:nth-of-type(6) {
        width: 110px;
        text-align: center;
        font-family: DINAlternate-Bold;
      }
    }
  }
}
</style>